<template>
	<view :data-theme="theme" class="container">
		<!-- <view class="header" style="display: flex;padding: 20rpx; justify-content: flex-end;">
			<view class="title-c bg_color" style="color: #fff;padding: 20rpx;border-radius: 8rpx;">
				{{dataDetail.scheduledStatus | scheduledStatusFilter}}
			</view>
		</view> -->
		
		<view class="tab-view">
			<view class="bg_color" style="height: 500rpx;width: 100%;color: #fff;">
				<view style="display: flex;margin: 20rpx 30rpx;">
					<view>
						预约单号
					</view>
					<view class="main_color"
						style="background-color: rgba(237, 244, 254,0.8);padding: 4rpx 10rpx;border-radius: 6rpx;margin: 0 20rpx;font-size: 24rpx;">
						已入库
					</view>
					<view>
						Y24051520870957
					</view>
				</view>
				<view style="margin: 0 20rpx; border-bottom: 2rpx solid rgba(237, 244, 254, 0.3);"></view>
				<view style="color: #fff;margin:30rpx;font-size: 35rpx;font-weight: bolder;">
					北京通州仓
				</view>
				<view style="margin: 20rpx 30rpx;display: flex;">
					<view style="flex: 1;text-align: center;">
						<span class="main_color"
							style="background-color: rgba(237, 244, 254,0.9);border-radius: 6rpx;font-size: 24rpx;padding: 4rpx 8rpx;width: 110rpx;display: block;">直送仓</span>
					</view>
					<view style="flex: 4;">
						北京通州仓
					</view>
				</view>
				<view style="margin: 20rpx 30rpx;display: flex;">
					<view style="flex: 1;text-align: center;">
						<span class="main_color"
							style="background-color: rgba(237, 244, 254,0.9);border-radius: 6rpx;font-size: 24rpx;padding: 4rpx 8rpx;width: 110rpx;display: block;">上午配</span>
					</view>
					<view style="flex: 4;">
						2024-05-15 23:00-01:00
					</view>
				</view>
				<view style="margin: 20rpx 30rpx;display: flex;">
					<view style="flex: 1;">
						送货地址
					</view>
					<view style="flex: 4;">
						北京市北京市通州区北京市通州区马驹桥镇兴贸南街1号院北门
					</view>
				</view>
			</view>
			
			<view class="card" style="padding: 30rpx;margin-top: -120rpx;">
				<view style="font-size: 35rpx;font-weight: bolder;margin-bottom: 30rpx;">
					签到记录
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view>
						第一车 00:50 北京通州仓
					</view>
					<view style="color: #32ab63;">
						已通过
					</view>
				</view>
			</view>
			<view class="card bg-content">
				<view style="margin: 14rpx 0;">
					<uni-row class="demo-uni-row"
						style="font-size: 29rpx;color: #999;padding: 10rpx 10rpx;align-items: center;text-align: center;">
						<uni-col :span="12">
							<view class="demo-uni-col dark">应送货</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col dark">已入库</view>
						</uni-col>
					
					</uni-row>
					<uni-row class="demo-uni-row"
						style="font-size: 35rpx;color: #000;padding: 10rpx 10rpx;align-items: center;text-align: center;font-weight: bolder;">
						<uni-col :span="12">
							<view class="demo-uni-col dark">884</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col dark">883</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<u-tabs @click="tabChangeClick" :list="tabList" :scrollable="true" :lineWidth="30" :lineColor="bgColor"
			:current="tabIndex" :activeStyle="{ color: bgColor}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
		<view style="margin: 20rpx;display: flex;text-align: center;font-size: 24rpx;">
			<text style="flex: 4;text-align: left;">商品名称</text>
			<text style="flex: 1;">应送货</text>
			<text style="flex: 1;">已入库</text>
		</view>
		<scroll-view scroll-y="true" class="print_center" @scrolltolower="scrolltolowerFn">
			<swiper-product-page ref="tab" :tabIndex="tabIndex"></swiper-product-page>
		</scroll-view>
		
		
		<!-- <view class="tab-view">
			<view class="card">
				<h2>预约信息</h2>
				<view style="border-bottom: 1px solid #f6f6f6;margin: 20rpx;"></view>
				<view class="column">
					<view class="title">
						提货地址:
					</view>
					<view class="title-c">
						{{dataDetail.depotAddress}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						下单时间:
					</view>
					<view class="title-c">
						{{dataDetail.scheduledTime}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						预约单号:
					</view>
					<view class="title-c">
						{{dataDetail.reservationId}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						仓库名称:
					</view>
					<view class="title-c">
						{{dataDetail.depotName}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						配送批次:
					</view>
					<view class="title-c">
						{{distributionWaveNumber[dataDetail.distributionWaveNumber]}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						配送日期:
					</view>
					<view class="title-c">
						{{dataDetail.deliveryTime}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						预约类型:
					</view>
					<view class="title-c">
						{{appointmentType[dataDetail.appointmentType]}}
					</view>
				</view>
				<view class="column">
					<view class="title" style="width: 180rpx;">
						是否预约贴码:
					</view>
					<view class="title-c">
						{{isReservationLabel[dataDetail.isReservationLabel] ? isReservationLabel[dataDetail.isReservationLabel] : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title" style="width: 180rpx;">
						预计到货时间:
					</view>
					<view class="title-c">
						{{dataDetail.scheduledArrivalTime ? dataDetail.scheduledArrivalTime : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						到货时间:
					</view>
					<view class="title-c">
						{{dataDetail.arrivalTime ? dataDetail.arrivalTime : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title" style="width: 180rpx;">
						是否缺失货物:
					</view>
					<view class="title-c">
						{{isMissingGoods[dataDetail.isMissingGoods] ? isMissingGoods[dataDetail.isMissingGoods] : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						是否破损:
					</view>
					<view class="title-c">
						{{isBroken[dataDetail.isBroken] ? isBroken[dataDetail.isBroken] : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						破损数量:
					</view>
					<view class="title-c">
						{{dataDetail.brokenNumber ? dataDetail.brokenNumber : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						是否入库:
					</view>
					<view class="title-c">
						{{ isPutDepot[dataDetail.isPutDepot] ? isPutDepot[dataDetail.isPutDepot] : '-'}}
					</view>
				</view>
				<view class="column">
					<view class="title">
						入库时间:
					</view>
					<view class="title-c">
						{{ dataDetail.inDepotTime ? dataDetail.inDepotTime : '-'}}
					</view>
				</view>
			</view>
			<view class="card">
				<h2>商品信息</h2>
				<view class="stockOrder" v-for="(ele,index) in dataDetail.productInfo" :key="index">
					<view class="businessStock">
						<view class="top_right">
							<view class="top_right_weight mb_10">[{{ele.brand}}]{{ ele.productName }}</view>
						</view>
					</view>
					<view class="column">
						<view class="title">
							商品规格:
						</view>
						<view class="title-c">
							{{ele.skuName}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							商品ID:
						</view>
						<view class="title-c">
							{{ele.productId}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							商品分类:
						</view>
						<view class="title-c">
							{{ele.category}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							商品类型:
						</view>
						<view class="title-c">
							{{type[ele.type] ? type[ele.type] : '-'}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							货物数量:
						</view>
						<view class="title-c">
							{{ele.goodsNumber}}({{ele.goodsUnit}})
						</view>
					</view>
					<view style="margin:20rpx;border-bottom: 1px solid #f6f6f6"></view>
				</view>
			</view>
		</view> -->

		<view class="content-footer" style="position: fixed;bottom: 0px;width: 100%;margin-top: 30rpx;padding-bottom: 30rpx;background-color: #fff;">
			<view style="display: flex;">
				<!-- v-if="dataDetail.scheduledStatus == 1" -->
				<button style="height:32px; font-weight: bold;flex: 1;margin: 20rpx;line-height: 32px;"
					class="plain_bgColor" plain="true" @click="cancelScheduled()">联系收货人</button>
			</view>
		</view>

		<!-- 生态窗组件 -->
		<u-modal :show="showCancelOrder" showCancelButton @confirm="cancelOrder" :content='showCancelOrderInfo'
			@cancel="() => showCancelOrder = false">
		</u-modal>
	</view>
</template>

<script>
	import swiperProductPage from '../components/swiper-product-page.vue';
	import {
		cancelScheduledApi
	} from '@/api/scheduledDelivery.js';
	import {
		scheduledStatusFilter
	} from '../utils/filter.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components:{
			swiperProductPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataDetail: {},
				showCancelOrder: false, //确认取消弹窗
				showCancelOrderInfo: '您确认取消预约吗？',
				tabList: [{
					name: '全部商品',
					type: 1
				}, {
					name: '未入库商品',
					type: 2
				}],
				tabIndex: 0,
				type: {
					1: '成品',
					2: '包装物'
				},
				distributionWaveNumber: {
					1: '上午',
					2: '下午',
					3: '晚上',
					4: '凌晨',
				},
				appointmentType: {
					1: '预售品',
					2: '非售品'
				},
				isReservationLabel: {
					0: '是',
					1: '否'
				},
				isRight: {
					1: '正确',
					2: '不正确'
				},
				isMissingGoods: {
					1: '有缺失',
					2: '无缺失'
				},
				isBroken: {
					1: '有破损',
					2: '无破损'
				},
				isPutDepot: {
					0: '已取消',
					1: '已入库',
					2: '未入库',
				}
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let data = JSON.parse(options.data)
			this.dataDetail = data;
		},
		// 过滤器
		filters: {
			scheduledStatusFilter // 订单状态
		},
		methods: {
			tabChangeClick(item) {
				this.tabIndex = item.index;
			},
			// 取消退库确认窗
			cancelScheduled() {
				this.showCancelOrder = true;
			},
			// 确认取消退库操作
			cancelOrder() {
				let ids = this.dataDetail.id;
				cancelScheduledApi({
					ids: ids
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
						const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
						const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
						uni.navigateBack({
							delta: 1,
							success: (res) => {
								uni.$emit('shopMessageoTherFun'); // 通过事件总线传递数据给上一个页面
							}
						});
					}
				});
				this.showCancelOrder = false;
			}
		}
	}
</script>

<style lang="scss">
	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px 0 20px 10px;
		padding-top: 20rpx
	}

	.mb_10 {
		margin-bottom: 10rpx;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 18rpx;
	}

	.stockOrder {
		background-color: #f6f6f6;
		margin: 0 20rpx;
		border-radius: 16rpx;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		// .top_right {
		// 	margin-left: 20rpx;
		// }
	}

	.top_right_weight {
		font-weight: bold;
	}
	
	// 商品列表
	.print_center {
		// margin-top: 10px;
		// background-color: white;
		flex: 1;
		overflow: scroll;
	}
</style>